<!-- 搜索页 -->
<template>
  <div style="padding: 0px; max-width: 600px; margin: 0 auto; overflow: hidden">
    <!-- 搜索行 -->
    <div>
      <div class="s30153804">
        <!-- 返回图标 -->
        <span class="s-3613cfc6" style="float: left">
          <img alt="" title="" src="https://image.hongbeibang.com/FoTuxKG5pqYKuAsT8BjrflkAxEpj?48X48&amp;imageView2/1/w/48/h/48" class="s-6a5cf0dc" @click="$router.go(-1)" />
        </span>
        <!-- 搜索按钮 -->
        <span class="s7d4f25eb" style="float: right">搜索</span>
        <!-- 搜索框 -->
        <div class="s2ca81225">
          <div class="s60de47cb">
            <div style="overflow: hidden; width: 100%">
              <input type="text" class="s6c123eab" placeholder="搜索食谱/食材，烘焙/家常菜一应俱全" value="" />
            </div>
          </div>
        </div>
      </div>
      <div class="s7e1f0f36"></div>
    </div>
    <!-- 热门搜索 -->
    <div class="s7ec60f39">
      <div class="s-3f5ee535">热门搜索</div>
    </div>
    <!-- 热门搜索展示 -->
    <RecordCard :HotSearchs="HotSearchs"></RecordCard>
    <!-- 最近搜索 -->
    <div style="position: relative; overflow: hidden">
      <!-- 删除图标 -->
      <div class="s-1bebe277">
        <img alt="" title="" src="https://image.hongbeibang.com/FlNyAtoE7VQRWghfLMIzjymlNTI2?48X48&amp;imageView2/1/w/38/h/38" class="s-34f4f4a1" />
      </div>
      <div class="s7ec60f39"><div class="s-3f5ee535">最近搜索</div></div>
    </div>
    <RecordCard :HotSearchs="HotSearchs1"></RecordCard>
  </div>
</template>

<script>
  import RecordCard from '@/components/search/RecordCard.vue'
  export default {
    components: {
      RecordCard,
    },
    data() {
      return {
        HotSearchs: [
          { id: 0, name: '🔥披萨' },
          { id: 1, name: '🔥披萨' },
          { id: 2, name: '🔥披萨' },
          { id: 3, name: '🔥披萨' },
          { id: 4, name: '🔥披萨' },
          { id: 5, name: '🔥披萨' },
          { id: 6, name: '🔥披萨' },
          { id: 7, name: '🔥披萨' },
          { id: 8, name: '🔥披萨' },
        ],
        HotSearchs1: [
          { id: 0, name: '欧宝' },
          { id: 1, name: '其他' },
        ],
      }
    },
  }
</script>

<style lang="scss" scoped>
  .s30153804 {
    background: #ffffff;
    height: 44px;
    z-index: 6;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 18px;
    margin: 0 auto;
    max-width: 600px;
    box-sizing: border-box;
  }
  //返回图标
  .s-3613cfc6 {
    font-size: 0;
    height: 44px;
    float: left;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .s-6a5cf0dc {
    width: 27px;
    height: 27px;
    margin: 9.5px 0;
  }
  // 搜索按钮
  .s7d4f25eb {
    margin: 7px 0;
    position: relative;
    z-index: 1;
    font-size: 16px;
    line-height: 30px;
    color: #4a4945;
    float: left;
  }
  // 搜索框
  .s2ca81225 {
    text-align: left;
    height: 35px;
    margin: 4.5px 50px;
  }
  .s60de47cb {
    height: 100%;
    margin: 0 auto;
    border-radius: 4px;
    zoom: 1;
    background-color: #f5f7f9;
    box-sizing: border-box;
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .s6c123eab {
    background-color: #f5f7f9;
    padding: 5px 0;
    width: 100%;
    box-sizing: border-box;
    line-height: 25px;
    color: #4a4945;
    font-size: 14px;
    vertical-align: middle;
    border: none;
    outline: none;
  }
  .s7e1f0f36 {
    height: 44px;
    overflow: hidden;
    zoom: 1;
  }
  // 热门搜索
  .s7ec60f39 {
    margin: 15px;
    overflow: hidden;
    zoom: 1;
  }
  .s-3f5ee535 {
    font-size: 14px;
    line-height: 20px;
    color: #999999;
    overflow: hidden;
    zoom: 1;
  }
  // 最近搜索
  .s-1bebe277 {
    position: absolute;
    width: 19px;
    height: 19px;
    padding: 15px;
    z-index: 2;
    right: 0;
  }
  .s-34f4f4a1 {
    width: 100%;
    overflow: hidden;
  }
</style>
